{% extends "about/base.html" %}

{% block title %}OK{% endblock %}

{% block content %}
<div class="landing row">
  <div class="col-md-10 col-md-offset-1">
    {% include 'alerts.html' %}
    <h1 class="title">Automate Grading &amp; Personalize Feedback.</h1>
    <p>OK autogrades programming assignments, facilitates submission, <br> composition feedback, and analytics for your class.</p>


    <a onclick="showElem('#demo')" class="button">View Demo</a>
    {% if config['TESTING_LOGIN'] and (config['ENV'] == 'dev' or config['ENV'] == 'test') %}
      <a data-no-instant href="{{ url_for('auth.testing_login') }}" id="testing-login" class="button">Testing Login</a>
    {% else %}
      <a data-no-instant href="{{ url_for('auth.login') }}" id="login" class="button">Student Login</a>
    {% endif %}
  </div>
</div>

<div class="landing row feature-block logo-section">
    <hr>
     <h2>Used by courses with millions of submissions</h2>
    <div class="col-md-10 col-md-offset-1">
        <div class="col-sm-3">
            <img class="landing-logo desaturate select-none" src="{{ url_for('static', filename='img/berkeley.png') }}">
        </div>
        <div class="col-sm-3 hidden-xs">
            <a href="http://cs61a.org" target="_blank" >
                <p class="landing-course-name"> CS 61A </p>
            </a>
        </div>
        <div class="col-sm-3 hidden-xs">
            <a href="http://data8.org/" target="_blank" >
                <p class="landing-course-name"> Data Science 8 </p>
            </a>
        </div>
        <div class="col-sm-3 hidden-xs">
            <a href="http://cs168.io" target="_blank" >
                <p class="landing-course-name"> CS 168 </p>
            </a>
        </div>
    </div>
</div>

<div class="landing row feature-block">
    <div class="col-md-6" >
        <img class="img-responsive select-none" src="{{ url_for('static', filename='img/landing-comments.png') }}">
    </div>
    <div class="col-md-6 center">
        <h1>Personalized feedback</h1>
        <p>View student solutions and leave comments on how to improve their style. You can put the pen & paper away and digitize feedback.</p>
    </div>
</div>

<div class="landing row feature-block">
    <div class="col-md-6 col-md-push-6">
        <img class="img-responsive select-none" src="{{ url_for('static', filename='img/landing-stats.png') }}">
    </div>
    <div class="col-md-6 col-md-pull-6 center">
        <h1>Realtime assignment statistics</h1>
        <p> Find out what questions students are working on, how many students are done, and which students have not started with detailed statistics.</p>
    </div>
</div>

<div class="landing row feature-block">
    <div class="col-md-6 center">
        <img class="img-responsive select-none" src="{{ url_for('static', filename='img/landing-autograde.png') }}">
    </div>
    <div class="col-md-6">
        <h1>Grading with one click</h1>
        <p>With a language agnostic autograder, you can grade your assignments by simply specifying a command to run. We'll handle the infrastructure so you can focus on teaching.</p>
    </div>
</div>
<hr>
<div class="landing-light row features-block" id="features-block">
    <h2>Built for instructors</h2>
    <p class="more-text"> Improve your progamming assignments with these OK Features</p>

    <div class="col-md-12">
        <div class="row">
            <div class="col-md-4">
            <h4>Plagarism Detection</h4>
            </div>
            <div class="col-md-4">
            <h4>Find Online Solutions</h4>
            </div>
            <div class="col-md-4">
            <h4>Late Submissions</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h4>Group Assignments</h4>
            </div>
            <div class="col-md-4">
                <h4>Drag & Drop Uploads</h4>
            </div>
            <div class="col-md-4">
                <h4>Jupyter Notebook Submission</h4>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <h4>Assignment Bank</h4>
            </div>
            <div class="col-md-4">
                <h4>Canvas LMS Integration</h4>
            </div>
            <div class="col-md-4">
                <h4>... and many more</h4>
            </div>
        </div>
    </div>
</div>

<div class="landing landing-light row">
    <hr>
    <div class="col-md-6">
        <h2>Pricing: <i>Free</i></h2>
        <p> Use our hosted service for free if you teach a computer science or data science course at an accredited school.</p>
    </div>
    <div class="col-md-6">
        <h2>Open Source</h2>
        <p> The source code for OK is available on <a href="https://github.com/okpy/ok">GitHub</a>. You can run an instance of OK on your own servers. </p>
    </div>
</div>

<div class="landing landing-light row feature-block" id="demo">
    <hr />
    <div class="col-md-4 col-sm-12">
    <h2> Video Demos </h2>
    <p> Here are some OK demo videos:</p>
    <br>
    <div class="btn-group-vertical">
        <a class="btn pill pill-button btn-rounded" href="https://www.youtube.com/watch?v=pp8DSTDTdb8&rel=0">OK Overview (5 min)</a>
        <a class="btn pill pill-button btn-rounded" href="https://www.youtube.com/watch?v=-EWJ6s2_cPE&rel=0">OK Server Overview</a>
        <a class="btn pill pill-button btn-rounded" href="https://www.youtube.com/watch?v=PFTm7hmnKho&rel=0">OK + Jupyter Demo</a>
        <a class="btn pill pill-button btn-rounded" href="https://www.youtube.com/watch?v=polTBnMXGQI&rel=0">Talk: How CS61A uses OK</a>
        <a class="btn pill pill-button btn-rounded" href="https://www.youtube.com/watch?v=97paBo_U_vY&rel=0">Office Hours Queue</a>
    </div>
    </div>
    <div class="col-md-8 col-sm-12 hidden-xs">
        <iframe width="100%" height="400" src="https://www.youtube.com/embed/-EWJ6s2_cPE?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>


<div class="landing cta-block row">
    <hr>
    <div class="col-md-12">
        <h2>Use OK in your course.</h2>
        <p> We built OK to improve computer science and data science courses. <br> Get started with OK by signing up your course: </p>
        <a href="{{ url_for('admin.create_course') }}" data-no-instant class="button">Register your course</a>
        <a href="mailto:ericpai@berkeley.edu?cc=denero@berkeley.edu&bcc=cs61a@berkeley.edu&subject=Using%20OK" class="button">Contact us</a>
    </div>
</div>


{% endblock content %}
